<script setup>
    import { ref } from 'vue'

    //导入css样式表
    import './styles/index.css'

    //任务列表
    const todoList=ref([
      { id:321,name:'吃饭',finished:false },
      { id:666,name:'睡觉',finished:true },
      { id:195,name:'打豆豆',finished:false },
    ])

    const title=ref('')

    //添加
    const onAdd=()=>{
      //去除title的首尾空格
      const name=title.value.trim();
      //非空校验
      if(!name) return alert('名称不能为空')

      //给todoList数组的末尾添加一个新的对象
      todoList.value.push({
        name,
        id:Date.now(),//时间戳
        finished:false
      })

      //清空title
      title.value=''
    }

    //删除
    const onDel=(i)=>{
      //删除前的确认提示
      if(confirm('是否确认删除')){
        todoList.value.splice(i,1)
      }
    }

    //清空
    const onClear=()=>{
      todoList.value=[]
    }
</script>

<template>
  <section class="todoapp">
    
    <header class="header">
      <h1>比特人记事本</h1>
      <input placeholder="请输入任务" class="new-todo" v-model="title" />
      <button class="add" @click="onAdd">添加任务</button>
    </header>

    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in todoList" :key="item.id">
          <div class="view">
            <span class="index">{{ index+1 }}</span>
            <label>{{ item.name }}</label>
            <button class="destroy" @click="onDel(index)"></button>
          </div>
        </li>
      </ul>
    </section>

    <footer class="footer">
      <span class="todo-count">合计: {{ todoList.length }}</span>
      <button class="clear-completed" @click="onClear">清空任务</button>
    </footer>

  </section>
</template>


